<template>
	<view class="ithui-content">
		<view class="upload">
			<h2>请拍摄并上传你的有效身份证照片</h2>
			<view class="upload-box">
				<view class="upload-item" style="flex: 1">
					<view @click.stop="upload('card1')" class="flex justify-center align-center" style="width:100%;height: 180rpx;padding: 10rpx;"
						:class="card1 ? '' : 'image-center'">
						<image v-if="card1" :src="card1" mode="heightFix" style="width:100%;height: 150rpx;"></image>
						<text v-else class="wlIcon-tianjia flex align-center text-gray" style="font-size: 90rpx;"></text>
					</view>
					<view class="intro">上传身份证正面</view>
				</view>
				<view class="upload-item" style="flex: 1">
					<view @click.stop="upload('card2')"  class="flex justify-center align-center" style="width:100%;height: 180rpx;padding: 10rpx;"
						:class="card2 ? '' : 'image-center'">
						<image v-if="card2" :src="card2" mode="heightFix" style="width:100%;height: 150rpx;"></image>
						<text v-else class="wlIcon-tianjia flex align-center text-gray" style="font-size: 90rpx;"></text>
					</view>
					<view class="intro">上传身份证反面</view>
				</view>
			</view>
		</view>
		<view class="mt-20 expect">
			<h2>拍摄身份证要求：</h2>
			<view class="expect-text">大陆公民持本人有效的二代身份证；</view>
			<view class="expect-text">
				拍摄时确保身份证 <text>边框完整，字体清晰，亮度均匀</text>。
			</view>
			<view class="error">
				<div class="error-item">
					<image src="@/static/style-two/yesok.png" />
					<text>标准</text>
				</div>
				<div class="error-item">
					<image src="@/static/style-two/error_01.png" />
					<text>边框缺失</text>
				</div>
				<div class="error-item">
					<image src="@/static/style-two/error_02.png" />
					<text>边框模糊</text>
				</div>
				<div class="error-item">
					<image src="@/static/style-two/error_03.png" />
					<text>闪光强烈</text>
				</div>
			</view>
		</view>
		<view class="confirm">
			<h2 class="mt-20 b-line">请确认你的身份信息：</h2>
			<view class="confirm-item">
				<view class="key">姓名</view>
				<text class="val">{{userInfo.name}}</text>
			</view>
			<view class="confirm-item">
				<view class="key">身份证号</view>
				<text class="val">{{userInfo.code}}</text>
			</view>
			<view class="confirm-item">
				<view class="key">有效期</view>
				<text class="val">{{userInfo.end}}</text>
			</view>
		</view>
		
		<!-- 同意服务条款 -->
		<view class="margin-top-sm">
			<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange">
				<checkbox class="blue margin-sm" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" />
				<view>
					我已阅读<text @tap="onDetails(3, '实名认证服务协议')">实名认证服务协议</text>
				</view>
			</checkbox-group>
		</view>
		
		<view class="submit">
			<button @tap="handleSubmit" shape="circle" type="primary" text="个人认证">个人认证</button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				card1: '',
				card2: '',
				userInfo: {
					name: '',
					code: '',
					end: '',
				},
				checked: 0
			}
		},
		methods: {
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
			// 选择图片
			upload(type) {
				const self = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						//console.log(res)
						if (res.tempFilePaths) {
							res.tempFilePaths.map((item, index) => {
								// 延迟触发一下
								uni.request({
									url: '/wanlshop/common/uploadData',
									success: updata => {
										uni.getImageInfo({
											src: res.tempFilePaths[0],
											success: image => {
												uni.uploadFile({
													url: updata.data.uploadurl,
													filePath: image.path,
													name: 'file',
													formData:updata.data.storage == 'local' ? null : updata.data.multipart,
													success: data => {
														let src = 'https://adminshop.12sxb.cn/' + JSON.parse(data.data).data.url
														if (type === 'card1') {
															self.card1 = src
															self.toOcr(type, src)
														}
														if (type === 'card2') {
															self.card2 = src
															self.toOcr(type, src)
														}
													},
													fail: error =>{
														uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
													}
												});
											}
										});
										
										
									}
								});
							})
						}
					}
				});
			},
			
			//验证身份证
			toOcr(type, image) {
				uni.showLoading({
					title: '身份证识别中',
					mask: true
				})
				//获取token
				let token = uni.getStorageSync("wanlshop:user").token
				console.log(token)
				uni.request({
					url: `https://adminshop.12sxb.cn/api/wanlshop/passport/ocr?image=${image}`,
					method: 'GET',
					header: {
						'token': token
					},
					success: res => {
						uni.hideLoading()
						if (res.res.msg === 'ok') {
							if (type === 'card1') {
								if(res.data.Name && res.data.IdNum){
									this.userInfo.name = res.data.Name
									this.userInfo.code = res.data.IdNum
								} else{
									this.$wanlshop.msg('身份证正面识别错误，请重新上传~')
									this.card1 = ''
									this.userInfo.name = ''
									this.userInfo.code = ''
								}								
							}
							if (type === 'card2') {
								if(res.data.ValidDate){
									this.userInfo.end = res.data.ValidDate
								} else{
									this.$wanlshop.msg('身份证反面识别错误，请重新上传~')
									this.card2 = ''
									this.userInfo.end = ''
								}								
							}
						} else {
							if (type === 'card1') {
								this.userInfo.name = ''
								this.userInfo.code = ''
								this.card1 = ''
							}
							if (type === 'card2') {
								this.userInfo.end = ''
								this.card2 = ''
							}
							this.$wanlshop.msg(res.res.data)
						}				
					}
				})		
			},
			
			
			//提交个人认证
			async handleSubmit() {
				if (!this.card1 || !this.card2) {
					this.$wanlshop.msg('请上传图片~');
					return
				}
				if(this.checked == 2){
					uni.request({
						url: `https://adminshop.12sxb.cn/api/wanlshop/passport/auth`,
						method: 'POST',
						data: {
							//type: 1,
							card1: this.card1,
							card2: this.card2,
							name:this.userInfo.name,
							code:this.userInfo.code,
							period:this.userInfo.end
							//userInfo: this.userInfo,
						},
						header: {
							'token': uni.getStorageSync("wanlshop:user").token
						},
						success:res => {
							if(res.res.code == 1){
								this.$wanlshop.msg(res.res.msg);
								uni.switchTab({
									url:'/pages/local'
								})
							} else{
								this.$wanlshop.msg('信息有误，请重新认证~');
							}					
						}
					})	
				} else{
					this.checked = 1;
					setTimeout(() => {
						this.checked = 0;
						this.$wanlshop.msg('请先同意实名认证服务协议');
					}, 300)
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f7fc;
	}
</style>

<style lang="scss" scoped>
	.blue {
	    border-color: #007aff !important;
	    color: #ffffff !important;
	}
	
	.auth-clause {
	    display: flex;
	    align-items: center;
	    font-size: 24rpx;
	    color: #909090;
	}
	.auth-clause uni-text{		
		margin: 0 10rpx;
		color: #007aff;
	}
	
	
	.image-center {
		display: flex;
		justify-content: center
	}

	.upload-item {
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		justify-items: center;
		justify-content: center;

		.intro {
			width: 100%;
		}
	}

	.ithui {
		&-content {
			.mt-20 {
				margin-top: 20rpx;
			}

			.upload {
				background: #fff;

				&-box {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
					padding: 0 20rpx 30rpx 20rpx;
				}

				h2 {
					color: #999;
					font-weight: normal;
					text-align: left;

					font-size: 32rpx;
					padding: 20rpx 0 30rpx 40rpx;
				}

				&-item {
					background: #f4f8fe;
					border-radius: 20rpx;
					margin: 0 16rpx;

					.intro {
						background: #5581ff;
						border-radius: 0 0 20rpx 20rpx;
						text-align: center;
						color: #fff;
						font-size: 28rpx;
						padding: 16rpx 0;
					}
				}
			}

			.expect {
				color: #333;
				font-size: 26rpx;
				padding: 40rpx 30rpx 10rpx 30rpx;
				background: #fff;

				h2 {
					color: #999999;
					font-weight: normal;
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}

				&-text {
					text {
						font-style: normal;
						color: #ff5050;
					}
				}

				.error {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&-item {
						text-align: center;
						padding: 20rpx 0;
						flex: 1;
						margin: 20rpx 5rpx;

						image {
							width: 160rpx;
							height: 120rpx;
							margin: 0 auto;
						}

						text {
							font-size: 24rpx;
							color: #919191;
						}
					}
				}
			}

			.confirm {
				h2 {
					color: #999;
					font-weight: normal;
					font-size: 32rpx;
					padding: 30rpx;
					background-color: #fff;
				}

				&-item {
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					-webkit-box-align: center;
					-webkit-align-items: center;
					align-items: center;
					padding: 30rpx;
					position: relative;
					background-color: #fff;

					.key {
						-webkit-box-flex: 1;
						-webkit-flex: 1;
						flex: 1;
						min-width: 0;
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					.val {}
				}

				.b-line {
					position: relative;

					&:after {
						content: '';
						position: absolute;
						z-index: 2;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 2rpx;
						border-bottom: 2rpx solid #e2e2e2;
						transform: scaleY(0.5);
						transform-origin: 0 100%;
						-webkit-transform: scaleY(0.5);
						-webkit-transform-origin: 0 100%;
					}
				}
			}

			.submit {
				padding: 20rpx;
			}
		}
	}
</style>